/*
* @Author: Yejing
* @Date: 2023-05-28 17:19:45
* @LastEditors: Yejing
* @LastEditTime: 2023-06-10 10:31:18
* @Description: 店铺主页
*/
<template>
	<view class="shops-homepage">
		<c-navigation-bar backIconColor='#fff' :navType='search.navType' :navPlaceholder='search.navPlaceholder'
			:navThmen='search.navThmen' @focusEvent='focusEvent' naverSearchActive='#1B1D29' @switchSvgEvent='switchSvgEvent'>
			<template slot="center">
				<u-tabs bg-color='transparent' inactive-color='#999CAD' active-color='#fff' font-size='36' :list="type.data"
					:is-scroll="false" :current="type.current" @change="tabsChange"></u-tabs>
			</template>
			<template slot="icon">
				<bubble ref="bubble" :data='bubble.data' @bubbleLineClick='bubbleLineClick'></bubble>
			</template>
		</c-navigation-bar>
		<view class="container-box">
			<!--店鋪头部-->
			<view class="title-block">
				<view class="left">
					<u-image :src="shopImg" width="76rpx" height="76rpx" border-radius="18" bg-color="red"></u-image>
					<view class="info">
						<text class="title">旗舰店</text>
						<view>
							<text class="tag">
								<u-icon name="checkbox-mark" size='20'></u-icon>
								品牌
							</text>
							<text class="font"> 377.2k 关注</text>
						</view>
					</view>
				</view>
				<u-button>关 注</u-button>
			</view>
			<view v-for="(item,index) in productList" class="product-list" :key="index">
				<lineProductCard :card="item" type="live"></lineProductCard>
			</view>
			<u-swiper height="326" indicator-pos border-radius="25" indicator-pos="bottomLeft" :list="activity"></u-swiper>
			<view class="type-time">
				<u-tabs class="tabs-type-blue" :list="tabsType.list" :active-item-style='tabsType.activeItem' :show-bar='false'
					:is-scroll="true" :current="tabsType.current" @change="changeTabs">
				</u-tabs>
			</view>
			<view class="card-list">
				<view class="card" v-for="(card,index) in cardList" :key="index">
					<u-image width="100%" height="350rpx" border-radius="30rpx" :src="card.src"></u-image>
					<view class="info">
						<view class="left">
							<text class="title">魅族18S</text>
							<text class="tip">Giselle Top in White Linen</text>
							<view class="bottom">
								<text>$3599</text>
								<text>$4399</text>
								<text>(60% OFF)</text>
							</view>
						</view>
						<u-button>Get Now</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bubble from "../../bubble.vue"
	import lineProductCard from "../../productCard.vue"

	export default {
		components: {
			bubble,
			lineProductCard
		},
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
				},
				//更多
				bubble: {
					data: [{
						text: '分享',
						icon: 'edit-pen',
						url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit'
					}, {
						text: '服务',
						icon: 'grid',
						url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/qrCode'
					}, {
						text: '细节',
						icon: 'account',
						url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/visitor'
					}]
				},
				type: {
					data: [{
							name: '选级'
						},
						{
							name: '产品'
						},
						{
							name: '秒杀'
						},
					],
					current: 0
				},
				//商铺头像
				shopImg: require("static/images/product.png"),
				productList: [{
					name: 'Roller Rabbit',
					info: 'vadio Olderf ddfdsf',
					money: '198',
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
				}],
				activity: [{
					image: require('static/images/activite.png')

				}, {
					image: require('static/images/activite.png')

				}, {
					image: require('static/images/activite.png')

				}],
				tabsType: {
					list: [{
						name: '10:00 Start'
					}, {
						name: '12:00 Start'
					}, {
						name: '14:00 Start'
					}, {
						name: '16:00 Start'
					}],
					current: 0,
					activeItem: {
						'background': '#2934D0',
						'color': '#fff !important'
					},
				},
				cardList: [{
					src: require('static/images/close.png')
				}]
			}
		},
		methods: {
			// 如果有自定义中间标题
			hasTitle() {

			},
			//点击更右上角更多图标
			bubbleLineClick(url, index) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
				if (index == 3) {
					this.sharePopShow = true
				}
			},
			tabsChange(index) {
				this.type.current = index
			}
		},
		//离开页面关闭气泡
		onHide() {
			// this.$refs.bubble.moreClick()
		},
		//切换
		changeTabs(index) {
			this.tabsType.current = index;
		},
	}
</script>

<style lang="scss" scoped>
	.shops-homepage {
		.container-box {
			height: 100vh;
			background-image: linear-gradient(#1B1D29 180px, #1B1D29 50px, #fff, #fff, #fff);

			.title-block {
				display: flex;
				justify-content: space-between;
				margin-bottom: 48rpx;
				align-items: center;
				width: 170px;
				color: #FFFFFF;
				line-height: 19px;
				margin-bottom: 6px;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;

				.left {
					display: flex;
					color: #FFFFFF;

					.info {
						margin-left: 20rpx;
						padding-right: 40rpx;

						.title {
							font-size: 32rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 38rpx;
							margin-bottom: 12rpx;
							display: inline-block;

						}

						.tag {
							padding: 3rpx 4rpx;
							background: #2934D0;
							border-radius: 6rpx;
							font-size: 22rpx;
							position: relative;
							margin-right: 20rpx;

							&:after {
								position: absolute;
								content: '';
								right: -12rpx;
								width: 2rpx;
								height: 100%;
								background: #fff;
								top: 0;
							}

						}

						.font {
							font-size: 24rpx;
							font-weight: 400;
							color: #999CAD;
							margin-left: 10rpx;
						}


					}
				}

				uni-button {
					margin: 0;
					height: 48rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 48rpx;
					background: #2934D0;
					border-radius: 12rpx;
					padding: 0rpx 20rpx;
				}
			}

			/deep/ .u-indicator-item-round-active {
				background-color: #2934D0;
			}

			.product-list {
				margin-bottom: 68rpx;
			}

			.type-time {
				margin: 76rpx 0 46rpx 0;
			}

			.card-list {
				.card {
					background: #FFFFFF;
					border-radius: 30rpx;
					border: 2rpx solid #E1E8E8;

					.info {
						margin: 18rpx 0 40rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: end;

						.title {
							font-size: 36rpx;
							color: #000000;
						}

						.tip {
							font-size: 22rpx;
							color: #999CAD;
						}

						.bottom {
							text {}
						}
					}
				}
			}
		}
	}
</style>